import { Menu, Layout, Grid, Skeleton } from '@arco-design/web-react'
const SubMenu = Menu.SubMenu;
const MenuItem = Menu.Item;

const Col = Grid.Col;
import { Suspense } from "react"
const { Sider, Content } = Layout
import Header from './Header'

import { useNavigate, Outlet } from 'react-router-dom'

import { items ,subItems } from './config'

const siderStyle = {
    position: 'sticky',
    top: 0,
    height: '100%',
    maxHeight: '100vh',
    overflow: 'hidden',
}

const Home = () => {
    const navigate = useNavigate()
    const pathnameSplit = location.pathname.split('/')
    const siderSpan = pathnameSplit?.length <= 2 ? 4 : 0
    function onMenuClick(key) {
        navigate(key)
    }

    return (
        <Layout className="w-full min-h-screen">
            <Header className="shadow-md relative z-10"></Header>
            <Layout className="flex-1 flex-row">
                <Col className="min-w-80 " span={siderSpan} >
                    <Sider theme="light" width="100%" style={siderStyle} breakpoint="xs">
                        <Menu
                            style={{backgroundColor:'rgb(229,241,248)'}}
                            className="h-full "
                            selectedKeys={[pathnameSplit[1]]}
                            mode="vertical"
                            items={items}
                            // onClick={onMenuClick}
                            onClickMenuItem={onMenuClick}
                        >
                            {items.map((item) => <Menu.Item key={item.key}>
                                {item.label}
                            </Menu.Item>) }
                            {subItems.map( item => <SubMenu key={item.key} title={<> {item.label}</>}>
                                {item.children.map( subItem => <MenuItem key={subItem.key}>{subItem.label} </MenuItem>) }
                            </SubMenu>)}

                        </Menu>
                    </Sider>
                </Col>
                <Col className="flex-1 overflow-x-hidden py-24 px-36 bg-[rgb(239,244,250)]">
                    <Content className="w-full h-full">
                        <Suspense fallback={<Skeleton />} className="w-full h-full">
                            <Outlet />
                        </Suspense>
                    </Content>
                </Col>
            </Layout>
        </Layout>
    )
}

export default Home
